<template>
    <div class="top">
        <div class="leftTop">
            <span class="lbtn" @click="getHome">首页</span>
        </div>
        <div class="centerTop">
            <div class="cbtn">智慧旅游可视化大数据展示平台</div>
        </div>
        <div class="rightTop">
            <span class="rbtn">统计报告</span>
            <span class="time">{{ time }}</span>
        </div>
    </div>
</template>

<script setup lang='ts'>
import {  onBeforeUnmount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';


//定义存储时间
let time=ref()
//获取时间
time.value=new Date().toLocaleString()
//存储定时器
let timer=ref<number>(0)
const $router=useRouter()
//首页点击回调
const getHome=()=>{
    $router.push('/home')
}
//组件挂载开启定时器
onMounted(()=>{
    timer.value=setInterval(()=>{
        time.value=new Date().toLocaleString()
    },1000)
})
//组件卸载之前删除定时器
onBeforeUnmount(()=>{
    clearInterval(timer.value)
})


</script>

<style scoped lang='scss'>
    .top{
        width: 100%;
        height: 40px;
        display: flex;
        .leftTop{
            flex: 1.5;
            background: url('../../images//dataScreen-header-left-bg.png') no-repeat;
            background-size: 100% 100%;
            .lbtn{
                width: 100px;
                height: 40px;
                float: right;
                background:url('../../images//dataScreen-header-btn-bg-l.png');
                text-align: center;
                line-height: 40px;
                color: aqua;
                font-size: 20px;
            }
        }
        .centerTop{
            flex: 3;
            .cbtn{
                width: 100%;
                height: 74px;
                background: url('../../images//dataScreen-header-center-bg.png') no-repeat;
                background-size: cover;
                color: aqua;
                text-align: center;
                line-height: 40px;
                font-size: 30px;
            }
            
        }
        .rightTop{
            flex: 1.5;
            background: url('../../images/dataScreen-header-right-bg.png') no-repeat;
            background-size: cover;
            .rbtn{
                width: 150px;
                height: 40px;
                float: left;
                background: url('../../images/dataScreen-header-btn-bg-r.png') no-repeat;
                background-size: cover;
                text-align: center;
                line-height: 40px;
                color: aqua;
                font-size: 20px;
            }
            .time{
                float: right;
                text-align: center;
                line-height: 40px;
                color: aqua;
                font-size: 25px;
                margin-right: 5px;
            }
        }
    }
</style>